<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="/common/head :: commonHead">
</head>
<link th:href="@{/css/jquery.edittable.min.css}" rel="stylesheet">
<style>

    .file-list {
        height: 125px;
        display: none;
        list-style-type: none;
    }

    .file-list img {
        max-width: 70px;
        vertical-align: middle;
    }

    .file-list .file-item {
        margin-bottom: 10px;
        float: left;
        margin-left: 20px;
    }


    .file-list .file-item .file-del {
        display: block;
        margin-left: 20px;
        margin-top: 5px;
        cursor: pointer;
    }

    .flex-container9 {
        -webkit-justify-content: center;
        justify-content: center;
    }

    .flex-container {
        display: -webkit-flex;
        display: flex;
        margin: 0 auto;
    }

    .flex-item {
        margin: 10px;
    }

</style>


<body>

<section id="container" class="">

    <div th:include="/common/common::commonPassword"></div>
    <div th:include="/common/common::commonNavigationBar"></div>
    <section id="main-content">
        <section class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <div class="col-sm-12">
                            <div class="panel-body">
                                <div class="col-sm-4" style="display: flex;">
                                    <div class="col-sm-4">
                                        <label class="control-label" style="font-size: 20px;">产品名称：</label>
                                    </div>
                                    <div class="col-sm-8">
                                        <input id="queryTitle" class="form-control" placeholder="请输入产品名称"/>
                                    </div>
                                </div>
                                <div class="col-sm-4" style="display: flex;">
                                    <div class="col-sm-4">
                                        <label class="control-label" style="font-size: 20px;">款色名称：</label>
                                    </div>
                                    <div class="col-sm-8">
                                        <input id="queryStyleName" class="form-control" placeholder="请输入款色名称"/>
                                    </div>
                                </div>
                                <div class="col-sm-4" style="display: flex;">
                                    <div class="col-sm-4">
                                        <label class="control-label" style="font-size: 20px;">品牌名称：</label>
                                    </div>
                                    <div class="col-sm-8">
                                        <input id="queryBrandName" class="form-control" placeholder="请输入品牌名称"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="panel-body">
                                <div class="col-sm-4" style="display: flex;">
                                    <div class="col-sm-4">
                                        <label class="control-label" style="font-size: 20px;">是否推荐：</label>
                                    </div>
                                    <div class="col-sm-8">
                                        <select id="queryIsRecommend" class="form-control">
                                            <option value="" selected>请选择</option>
                                            <option value="0">未推荐</option>
                                            <option value="1">已推荐</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-4" style="display: flex;">
                                    <div class="col-sm-4">
                                        <label class="control-label" style="font-size: 20px;">创建时间：</label>
                                    </div>
                                    <div class="col-sm-8">
                                        <input id="queryDate" type="text" class=" form-control" placeholder="请选择时间"/>
                                    </div>
                                </div>
                                <div class="col-sm-4" style="display: flex;">
                                    <input type='button' value='搜索' id='query' class='btn btn-info' onclick='query()'/>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <!-- bootstrapTable -->
                            <div class="col-sm-12">
                                <div class="panel-body">
                                    <!-- 工具栏 -->
                                    <div id="toolbar">
                                        <a href="#" id="batchRecommend">批量推荐</a>
                                        <a href="#" id="batchCancelRecommend">批量取消推荐</a>
                                    </div>
                                    <table id="dataGrid">
                                    </table>

                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </section>
    </section>
    <!--main content end-->
</section>


<div class="modal fade" id="sortModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h7>设置排序</h7>
            </div>
            <div class="modal-body" style="height: 100px;">
                <input type="hidden" id="id"/>
                <div class="col-sm-12">
                    <div class="col-sm-3"></div>
                    <div class="col-sm-7">
                        <span style="color: red">品牌排行顺序由小到大排序，序号越小品牌越靠前</span>
                    </div>
                </div>
                <div class="col-sm-12">
                    <label class="col-sm-3 control-label" style="font-size: 18px">产品序号：</label>
                    <div class="col-sm-7">
                        <input id="sort" class="form-control" placeholder="请输入产品序号"/>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="submit" class="btn btn-primary">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="resetAddModal()">
                    取消
                </button>
            </div>

        </div>
    </div>
</div>


<div th:include="/common/common::commonPasswordModal"></div>

<span th:include="/common/buttom :: commonOnLoadJs"></span>
<script type="text/javascript" th:src="@{/js/ots/productRank.js}"></script>
<script>

</script>

</body>
</html>
